<template>
    <div>
        <nav-bar>
            <template v-slot:left></template>
            <template v-slot:default>商品详情</template>
            <template v-slot:right></template>
        </nav-bar>

        <div class="bimg">
          <van-image 
          width="100%"
          lazy-load
          :src="detail.cover_url"
        />


         <van-card style="text-align:left"
          :num="detail.stock"
          :price="detail.price+'.00'"
          :desc="detail.description"
          :title="detail.title"
        >
          <template #tags>
            <van-tag plain type="danger">新书</van-tag>
            <van-tag plain type="danger">推荐</van-tag>
          </template>
          <template #footer>
            <van-icon  v-if="detail.is_collect == '1'" @click="tosc(detail.id)" name="shop-collect-o" color="#ee0a24" dot size="30" style="top:12px;right:20px"/>
            <van-icon  v-if="detail.is_collect == '0'" @click="tosc(detail.id)" name="shop-collect-o"  dot size="30" style="top:12px;right:20px"/>
            <van-button type="danger" @click="handleAddCart" >加入购物车</van-button>
            <van-button color="#7232dd" @click="goToCart">马上购买</van-button>
          </template>
        </van-card>

        <van-tabs v-model:active="active">
          <van-tab title="详情">
            <div class="content" v-html="detail.details"></div>
          </van-tab>
          <van-tab title="相关产品">

                <van-row gutter="20" style="margin-bottom: 60px;">
                  <van-col span="8" v-for="item in like_goods.slice(0,9)" :key="item.id" @click="itemClick(item.id)">
                    <van-image
                      width="100"
                      height="100"
                      :src="item.cover_url"
                    />
                    {{item.title}}
                  </van-col>
                </van-row>

          </van-tab>
          
          <van-tab title="评论">
            <div class="content">
              <van-collapse v-model="activeNames"  v-for="item in detail.comments" >
              <div class="left">
                 <van-image
                    width="60"
                    height="60"
                    :src="item.user.avatar_url"
                  />
              </div>
              <div class="right">
                <van-collapse-item  :title="item.user.name+'&emsp;&emsp;时间:'+item.created_at" name="1" >
                  {{item.content}}
                  <br>
                  <span style="color: red;">{{item.reply}}</span>
                </van-collapse-item>
              </div>
              </van-collapse>
            </div>
          </van-tab>
        </van-tabs>
        </div>

        

    </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar';
import { ref,onMounted,reactive,toRefs } from 'vue';
import {useRoute,useRouter} from 'vue-router';
import {getDetail} from 'network/detail';
import {addCart} from 'network/cart';
import { Toast } from 'vant';
import {useStore} from 'vuex';
import {addsc} from 'network/collects';

export default {
  name:"Detail",
    components:{
        NavBar
    },
  setup() {
    const active = ref(0);
    const activeNames = ref(['1']);
    const route = useRoute();
    const router = useRouter();
    const store = useStore();
    let id = ref(0);

    const DGoods = reactive({
      detail:{},
      like_goods:[],
    });
    

    let itemClick=(id)=>{
      console.log(id);
      getDetail(id).then(res=>{
         DGoods.detail = res.goods;
         DGoods.like_goods = res.like_goods;
      });
    };

    const init = ()=>{
      id.value = route.query.id;
      getDetail(id.value).then(res=>{
         DGoods.detail = res.goods;
         DGoods.like_goods = res.like_goods;
      });
    }


    onMounted(()=>{
      init();
    })
    
    const handleAddCart = () =>{
      addCart({goods_id:DGoods.detail.id,num:1}).then(res=>{
        if(res.status == '201' || res.status == '204'){
          Toast.success('添加成功');
          //设置vuex 购物车小图标数量
          store.dispatch('updateCart');
        }
      })
    }

    const goToCart = () =>{
      addCart({goods_id:DGoods.detail.id,num:1}).then(res=>{
        if(res.status == '201' || res.status == '204'){
          Toast.success('添加成功');
          //设置vuex 购物车小图标数量
          store.dispatch('updateCart');
          router.push({path:'/car'});
        }
      })

    }
    
    const tosc =(id)=>{
      console.log(id);
      let goods = id;
      addsc(goods).then(res=>{
        console.log(res.status);
        if(res.status == '201'){
          Toast.success('收藏成功')
          init();
        }else if(res.status == '204'){
          Toast.fail('取消收藏')
          init();
        }
        
      })
    }
    return{
      id,
      ...toRefs(DGoods),
      activeNames,
      active,
      itemClick,
      handleAddCart,
      goToCart,
      tosc
    }
    
  },


}
</script>

<style scoped  lang="scss">
.bimg{
  margin-top: 50px;
}
.content {
  display: flex;
 
  padding:10px;
  text-align:left;
  height: 100%;
  margin-bottom: 60px;
  .left{
    flex:1;
    left:0;
    width:80px;
    margin-top: 10px;
  }
  .right{
    flex:1;
    height: 100%vh;
    left:80px;
    right: 0;
    margin-top: 10px;
  }
}

</style>

<style>
 img{
  max-width: 100%;
  height: auto;
  }
.van-tabs__line {
  background-color: var(--color-tint) !important;
}
  .van-tabs__wrap{
    position:sticky;
    top:45px !important;
    z-index: 999;
  }
</style>